import React from 'react'
import ReactDOM from 'react-dom'
import './css/Search.css'


class List extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value:''
    }
  }
  theme = 'default';
  tpl = ''
  boxW=300
  config = {
    width:  document.documentElement.clientWidth  || document.body.clientWidth,
    tplType : 'file', 
    bgColor : null,
    height:null,
    // rightBtn:{
    //     txt:' ',
    //     style:{    }
     // }
  }
  componentWillMount = () => { 
      if(this.props.theme !== undefined) this.theme = this.props.theme; 
      if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
  }
  componentDidMount = () => {
      this.boxW = document.documentElement.clientWidth  || document.body.clientWidth; 
  }
  /**
   * 点击搜索事件
   */
      searchFor=(item)=>{
        let {value}=this.state 
        if(!!this.props.searchFor)
        {
          this.props.searchFor(value)
        }
      }
      keyup=(e)=>{
        var a=e.target.value 
       this.setState({value:e.target.value})
      }
      
      itemClick=(item)=>{ 
        if(!!this.props.itemClick)
        {
          this.props.itemClick( )
        }
      }
  render () {
      if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config);
      let {data} = this.props; 
    return (
      <div className = {'List '}>
        {
            data.map((item,i) => {
                let imgW = (this.config.img == null) ? 'all' : 'part';  
                let leftImg = (this.config.img == null) ? '' : <img src={this.config.img.key} style={this.config.img.style}/>
                let  right = (this.config.rightImg == null) ? '' :  <div className="rightImg" onClick={()=>this.searchFor()} style = {this.config.rightImg.style}><img src = {this.config.rightImg.key} /></div>
               let rightBtn=''
                if(this.config.rightBtn == null){
                    rightBtn=''
                }else{
                    if(this.config.rightBtn.type=='img'){
                      rightBtn= <div className="rightBtn" onClick={()=>this.itemClick()} style = {this.config.rightBtn.style}><img src = {this.config.rightBtn.txt} /></div>  
                    }else{
                      rightBtn= <div className="rightBtn" onClick={()=>this.itemClick()} style = {this.config.rightBtn.style}>{this.config.rightBtn.txt}</div> 
                    }
                }
                let tpl = <div className = 'Search_bar'> 
                                 <div className = {'text_wrap'} style={this.config.main}>
                                   {leftImg}
                                      <input type="text" onChange={this.keyup} value={this.state.value}  style={this.config.searchCon.style} ref="keyword" className="search_content" placeholder="请输入你要搜索的内容"/>
                                      {right} 
                                </div>  
                                 {rightBtn}
                            </div>
                return <div>{tpl}</div>
            })
        }
      </div>
    )
  }
}

export default List